<!doctype html>
<html lang="en">
<head>
	<title>Playlist - Kandasamy</title>
	<link type="text/css" href="/graphics/themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="/graphics/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="/graphics/ui/ui.core.js"></script>
	<script type="text/javascript" src="/graphics/ui/ui.sortable.js"></script>

	<style type="text/css">
	#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
	#sortable li span { position: absolute; margin-left: -1.3em; }
	</style>
	<script type="text/javascript">
	$(function() {
		$("#sortable").sortable();
		$("#sortable").disableSelection();
	});
	</script>
	<script type="text/javascript">
	$(function() {
		$('#save').click(
				function() {
					var arr = new Array();
					$('#sortable').children().each(function() {
						  arr.push(this.id);
				    });
					alert(arr);
					$.post("test.cgi", { newOrder: arr }, 
							   function(data){ 
							     alert("Data Loaded: " + data); 
							   });
												
				})
		.hover(
			function(){ 
				$(this).addClass("ui-state-hover"); 
			},
			function(){ 
				$(this).removeClass("ui-state-hover"); 
			}
		).mousedown(function(){
			$(this).addClass("ui-state-active"); 
		})
		.mouseup(function(){
			$(this).removeClass("ui-state-active");
		});

	});

	</script>
</head>
<body>
<div>

<ul id="sortable">
	<li class="ui-state-default" id="item1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Kanda Kanda</li>
	<li class="ui-state-default" id="item2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>En Peru MeenaKumari</li>
	<li class="ui-state-default" id="item3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Mambo Mamia</li>
	<li class="ui-state-default" id="item4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Idhellam Dupe</li>
	<li class="ui-state-default" id="item5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Excuse Me Mr.Kandasamy</li>
	<li class="ui-state-default" id="item6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>India Ponnu</li>
</ul>
<button id="save" class="ui-button ui-state-default ui-corner-all">Save PlayList</button>
</div><!-- End demo -->


</body>
</html>
